<template>
  <FCommonListPageBody>
    <el-table height="100%" border stripe :default-sort="sortConfig" @row-click="rowClick"
              :data="dataSource" @sort-change="sortChange" @selection-change="selectionChange"
              v-loading="loading">
      <!--      <el-table-column type="selection" width="40"/>-->
      <el-table-column show-overflow-tooltip sortable prop="appName" label="应用名称"/>
      <el-table-column show-overflow-tooltip sortable prop="createTime" label="创建时间"/>
      <el-table-column show-overflow-tooltip sortable prop="createBy" label="创建人"/>
      <el-table-column show-overflow-tooltip sortable prop="version" label="版本号"/>
      <el-table-column show-overflow-tooltip sortable prop="version" label="操作" width="260">
        <template #default="{row}">
          <el-button link type="primary" @click.stop="edit(row)">
            编辑
          </el-button>
          <el-button link type="primary" @click.stop="editName(row)">
            修改名称
          </el-button>

          <el-button link type="primary" @click.stop="publish(row)">
            发布
          </el-button>

          <el-popconfirm
            confirm-button-text="确定"
            cancel-button-text="取消"
            title="确定删除吗?"
            @confirm.stop="remove(row)">
            <template #reference>
              <el-button link @click.stop type="warning">
                删除
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </FCommonListPageBody>
  <FCommonListPageFooter>
    <el-pagination
      v-model:current-page="pagination.current"
      v-model:page-size="pagination.size"
      :page-sizes="pageOptions"
      background layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total" small
      @size-change="search"
      @current-change="pageChange"
    />
  </FCommonListPageFooter>

  <FModal header="编辑应用名称" ref="editNameModal" width="600" @ok="editOK">
    <el-input v-model="editingRow.appName" placeholder="请输入名称"/>
  </FModal>
  <PublishModal ref="refPublishModal" @doPublish="doPublish"/>
</template>

<script setup>
import PublishModal from '@/views/plat/app/PublishModal.vue';
import FCommonListPageBody from '@/components/layout/FCommonListPageBody.vue';
import FCommonListPageFooter from '@/components/layout/FCommonListPageFooter.vue';
import TableSearchUtils from '@/utils/TableSearchUtils';
import {getCurrentInstance, onMounted, ref, shallowRef, unref} from 'vue';
import {deleteAction, getAction, postAction, putAction} from '@/request/BaseRequest';
import FModal from '@/components/FModal/index.vue';
import {ElMessage} from 'element-plus';

const internalInstance = getCurrentInstance();
let global = internalInstance.appContext.config.globalProperties;

defineOptions({
  name: 'AppList'
});

const editingRow = ref({
  appName: undefined
});
const searchParams = shallowRef();
const editNameModal = shallowRef();
const publishing = shallowRef();
const refPublishModal = shallowRef();

const searchForm = {
  value: {
    validate(call) {
      call(true);
    },
  }
};

onMounted(() => {
  search();
});

function doSearch(params) {
  getAction('/plat/platApp/list', params).then(data => {
    if (data.success) {
      let result = data.result;
      setSearchResult(result);
    }
  });
}

function onRowClick(row) {
  edit(row);
}

function onSelection() {

}

function edit(row) {
  let url = `/plat/app/edit?fullScreen=1&appId=${row.id}`;
  global.$windowManager.open(url, {
    title: row.appName,
    close: () => search(true)
  });
}

function editName(row) {
  editNameModal.value.open();
  editingRow.value = JSON.parse(JSON.stringify(row));
}

function remove(row) {
  loading.value = true;
  deleteAction('/plat/platApp/remove', {id: row.id}).then(data => {
    loading.value = true;
    if (data.success) {
      search(true);
    }
  });
}

function publish(row) {
  publishing.value = row;
  refPublishModal.value.setData();
}

function editOK() {
  putAction('/plat/platApp/save', unref(editingRow)).then(data => {
    if (data.success) {
      search(true);
      editNameModal.value.close();
    }
  });
}

function doPublish(remark) {
  let appId = publishing.value.id;
  let data = {appId, remark};
  ElMessage({
    message: '发布中, 请稍候',
    type: 'info',
  });
  loading.value = true;
  postAction('/plat/app/publish', data).then(data => {
    if (data.success) {
      search(true);
      ElMessage({
        message: '发布成功',
        type: 'success',
      });
    }
  });
}

const {
  loading, rowClick, search, selectionChange, setSearchResult, pageOptions, pageChange,
  sortChange, dataSource, resetQueryParams, sortConfig, selectedRows, pagination
} = TableSearchUtils({
  refForm: searchForm,
  doSearch,
  defaultSortConfig: {
    prop: undefined,
    order: undefined,
  },
  searchParams,
  selectionChange: onSelection,
  rowClick: onRowClick
});

defineExpose({
  search
});

</script>
